<template>
  <el-main style="padding: 0px 20px">
    <el-row style="margin:20px 0px">
      <my-Search :searchOption="searchType" :searchWay="true"  @onSearch="getSearchContent"></my-Search>
      <my-Search :searchWay="true" :inputPlaceholder="'反馈简述'" @onSearch="getTitleSearchContent"></my-Search>
      <el-select style="margin-right:10px;width:110px" v-model="choiceStatusType" placeholder="处理状态" @change="statusSearch"  clearable >
        <el-option
          v-for="(item,index) in statusType"
          :key="index"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker
        v-model="choiceDateTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="反馈开始日期"
        end-placeholder="反馈结束日期"
        :default-time="['00:00:00', '23:59:59']"
        align="right"
        @blur="choiceDate"
        @change="choiceDate"
        >
      </el-date-picker>
    </el-row>
      <el-table
        :height="tableHeight"
        :data="feedbackList"
        row-key="id"
        ref="feedbackTableRef"
        border
        stripe
      >
        <el-table-column prop="title" align="center" label="反馈简述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="username" align="center" label="反馈人" width="130"></el-table-column>
        <el-table-column prop="createTime" align="center" label="反馈时间" width="200"></el-table-column>
        <el-table-column align="center" label="状态" width="150">
          <template slot-scope="scope">
            <el-alert v-if="scope.row.back!=null" title="已处理" type="success" show-icon center :closable="false" />
            <el-alert v-if="scope.row.back==null" title="未处理" type="warning" show-icon center :closable="false" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="260">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-view" size="small" @click="checkfeedback(scope.row)" >查看反馈</el-button>
            <el-button v-if="scope.row.back!=null" type="primary" icon="el-icon-edit-outline" size="small" @click="checkReply(scope.row)" >查看回复</el-button>
            <el-button v-if="scope.row.back==null" type="success" icon="el-icon-edit-outline" size="small" @click="replyFeedback(scope.row)" >回复用户</el-button>
          </template>
        </el-table-column>

      </el-table>

      <el-dialog title="反馈详情" append-to-body :visible.sync="feedbackVisible" :before-close="onfeedbackDialogClose">
        <el-descriptions class="margin-top" :title="feedbackTitle" :column="1" direction="vertical" :colon="false">
          <el-descriptions-item label="反馈内容">
            <div class="feedbackContent">
              {{feedbackContent}}
            </div>
          </el-descriptions-item>
          <el-descriptions-item v-if="fileList.length>0" label="反馈图片">
            <el-row type="flex"  >
              <el-col class="feedbackImg" v-for="(p,index) in fileList" :key="index">
                <el-image :src="p" :preview-src-list="fileList" fit="contain"></el-image>
              </el-col>
            </el-row>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="margin-top" title="反馈人信息" :column="4">
          <el-descriptions-item label="学号">{{feedbackNid}}</el-descriptions-item>
          <el-descriptions-item label="姓名">{{feedbackUsername}}</el-descriptions-item>
          <el-descriptions-item label="联系方式">{{feedbackPhone}}</el-descriptions-item>
          <el-descriptions-item label="所属组织">{{feedbackDeptName}}</el-descriptions-item>
        </el-descriptions>
      </el-dialog>

      <el-dialog title="回复内容" append-to-body :visible.sync="replyVisible" :before-close="onReplyDialogClose">
        <el-descriptions class="margin-top" :title="'回复人：'+replyUsername" :column="1" direction="vertical" :colon="false">
          <el-descriptions-item label="回复内容">
            <div class="feedbackContent">
              {{replyBack}}
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="原反馈内容">
            <div class="replyFeedback" style="background-color:#ccc">
              <p>简述：{{replyTitle}}</p>
              <p>内容：{{replyContent}}</p>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </el-dialog>

      <my-dialog
        :title="replyDialog.title"
        :width="replyDialog.width"
        :height="replyDialog.height"
        :visible="replyDialog.visible"
        ref="replyDialogRef"
        @onClose="onClose"
        @onConfirm="onConfirm"
      >
        <div slot="content">
          <el-input
            type="textarea"
            maxlength="500"
            show-word-limit
            v-model="replyBackContent"
            :rows="9"
            placeholder="（限500字）"
          ></el-input>
        </div>
      </my-dialog>

      <!-- 分页区 -->
    <pagination
    ref="pagination"
    @pagination="getPagination"
    :total="parseInt(totalPage)"
    :page="parseInt(searchCondition.page)"
    :limit="parseInt(searchCondition.pageSize)"
    :pageSizes="paginationSize"
    ></pagination>
  </el-main>
</template>

<script>
import {getFeedbackListApi,replyFeedbackApi} from "@/api/feedback"
import { getPicturesByBidApi} from "@/api/pictures";
import myDialog from "@/components/MyDialog/index";
import mySearch from "@/components/MySearch/index";
import pagination from "@/components/Pagination/index";
  export default {
    components: { myDialog, mySearch, pagination},
    data(){
      return{
        feedbackVisible:false,
        feedbackTitle:'',
        feedbackUsername:'',
        feedbackNid:'',
        feedbackDeptName:'',
        feedbackPhone:'',
        feedbackContent:'',
        fileList:[],

        replyVisible:false,
        replyUsername:'',
        replyTitle:'',
        replyContent:'',
        replyBack:'',

        replyDialog:{
          title: '回复用户',
          width: 620,
          height: 200,
          visible: false,
        },

        replyBackContent:'',
        replyFeedbackObj:'',


        feedbackList:[],
        tableHeight:0,
        searchCondition :{
          uid:'',
          nid:'',
          username:'',
          title:'',
          //1:已处理，0：未处理 空：全部
          status:'',
          startTime:'',
          endTime:'',
          page: 1,
          pageSize: 10,
        },
        statusType:[{label:"已处理",value:1},{label:"未处理",value:0}],
        //筛选项
        searchType:[{label:"学号/工号",value:"0"},{label:"姓名",value:"1"}],
        totalPage: 0,
        paginationSize: [5,10,30,50,100,200],
        choiceStatusType:'',
        choiceDateTime:'',
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              const end = new Date(new Date().setHours(23, 59, 59, 59));
              const start = new Date(new Date().setHours(0, 0, 0, 0));
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近一周',
            onClick(picker) {
              const end = new Date(new Date().setHours(23, 59, 59, 59));
              const start = new Date(new Date().setHours(0, 0, 0, 0));
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近一个月',
            onClick(picker) {
              const end = new Date(new Date().setHours(23, 59, 59, 59));
              const start = new Date(new Date().setHours(0, 0, 0, 0));
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近半年',
            onClick(picker) {
              const end = new Date(new Date().setHours(23, 59, 59, 59));
              const start = new Date(new Date().setHours(0, 0, 0, 0));
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 * 6);
              picker.$emit('pick', [start, end]);
            }
          }]
        },

      }
    },
    created(){
      this.getFeedbackList();
    },
    mounted() {
      this.$nextTick(() => {
        //有页码区就高度多-120
        this.tableHeight = window.innerHeight - 323 - 120;
      })
    },
    methods:{
      onClose(){
        this.replyDialog.visible = false;
        this.replyBackContent = '';
        this.replyFeedbackObj = '';
      },
      async onConfirm(){
        this.replyFeedbackObj.gid = this.$store.getters.userId;
        this.replyFeedbackObj.back = this.replyBackContent;
        let confirm = await this.$myconfirm("确定回复用户？");
        if (confirm) {
          let res = await replyFeedbackApi(this.replyFeedbackObj)
          if(res&&res.code==200){
            this.onClose();
            this.getFeedbackList();
            this.$message.success(res.msg);
          }
        }
      },
      replyFeedback(row){
        this.replyFeedbackObj = row;
        this.$refs.replyDialogRef.canConfirm = true;
        this.replyDialog.visible = true;
      },
      //关闭查看回复
      onReplyDialogClose(){
        this.replyVisible = false;
        this.replyTitle = '';
        this.replyContent = '';
        this.replyBack = '';
      },
      //查看回复
      checkReply(row){
        this.replyTitle = row.title;
        this.replyContent = row.content;
        this.replyUsername = row.gusername;
        this.replyBack = row.back;
        this.replyVisible = true;
      },
      //关闭查看反馈
      onfeedbackDialogClose(){
        this.feedbackVisible = false;
        this.fileList = [];
        this.feedbackTitle = '';
        this.feedbackUsername = '';
        this.feedbackNid = '';
        this.feedbackDeptName = '';
        this.feedbackPhone = '';
        this.feedbackContent = '';
      },
      //查看反馈
      checkfeedback(row){
        this.getPicturesByBid(row.no);
        this.feedbackTitle = row.title;
        this.feedbackUsername = row.username;
        this.feedbackNid = row.nid;
        this.feedbackDeptName = row.deptName;
        this.feedbackPhone = row.phone;
        this.feedbackContent = row.content;
        this.feedbackVisible = true;
      },
      //获取图片
      async getPicturesByBid(bid){
        let res = await getPicturesByBidApi({"bid":bid})
        if(res&&res.code==200){
          let copylist = res.data;
           copylist.filter(item=>{
            this.fileList.push(item.url);
          })
        }
      },

      //日期范围查询
      choiceDate(){
        if(this.choiceDateTime!=null){
          this.searchCondition.startTime = this.choiceDateTime[0];
          this.searchCondition.endTime = this.choiceDateTime[1];
        }else{
          this.searchCondition.startTime = '';
          this.searchCondition.endTime = '';
        }
        this.getFeedbackList();
      },
      //状态查询
      statusSearch(){
        this.searchCondition.status = this.choiceStatusType;
        this.getFeedbackList();
      },
      //标题查询
      getTitleSearchContent(val){
        this.searchCondition.title = val;
        this.getFeedbackList();
      },
      //内容查询
      getSearchContent(val,type){
        switch (type) {
          case '0':
            this.searchCondition.nid = val;
            this.searchCondition.username = '';
            break;
          case '1':
            this.searchCondition.nid = '';
            this.searchCondition.username = val;
            break;
          default:
            this.searchCondition.no = '';
            this.searchCondition.nid = '';
            break;
        }
        this.getFeedbackList();
      },
      //分页查询
      getPagination(val){
        this.searchCondition.page = val.page;
        this.searchCondition.pageSize = val.limit;
        this.getNoticeList();
      },
      //查询
      async getFeedbackList(){
        let res = await getFeedbackListApi(this.searchCondition)
        if(res&&res.code==200){
          this.totalPage = res.data.total
          this.feedbackList = res.data.list;
        }
      },
    },
    watch:{
      replyBackContent(val){
        if(val==null||val==''){
          this.$refs.replyDialogRef.canConfirm = true;
        }else{
          this.$refs.replyDialogRef.canConfirm = false;
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
.replyFeedback{
  font-size:14px;
  line-height: 18px;
  padding: 20px;
  background-color:#ddd;
  border-radius: 4px;
}
.feedbackContent{
  font-size: 18px;
  line-height:24px;
  text-indent: 2em;
  margin-bottom:30px;
}
.feedbackImg{
  width:130px;
  height:130px;
  margin-left: 40px;
}
</style>
